<tui-root
  *ngIf="widgetDrawer$ | async as drawer"
  [tuiMode]="(theme$ | async) === 'Dark' ? 'onDark' : null"
  [style.--widgets-width.px]="drawer.open ? drawer.width : 0"
>
  <ion-app appEnter>
    <ion-content>
      <ion-split-pane
        contentId="main-content"
        [disabled]="!(authService.isVerified$ | async)"
        (ionSplitPaneVisible)="splitPaneVisible($event)"
      >
        <ion-menu
          contentId="main-content"
          type="overlay"
          side="start"
          class="left-menu"
        >
          <ion-content color="light" scrollY="false" class="menu">
            <app-menu *ngIf="authService.isVerified$ | async"></app-menu>
          </ion-content>
        </ion-menu>

        <ion-menu
          contentId="main-content"
          type="overlay"
          side="end"
          class="right-menu container"
          [class.container_offline]="offline$ | async"
          [class.right-menu_hidden]="!drawer.open"
          [style.--side-width.px]="drawer.width"
        >
          <div class="divider">
            <button
              class="widgets-button"
              [class.widgets-button_collapse]="drawer.width === 600"
              (click)="onResize(drawer)"
            ></button>
          </div>
          <widgets *ngIf="drawer.open" [wide]="drawer.width === 600"></widgets>
        </ion-menu>

        <ion-router-outlet
          [responsiveColViewport]="viewport"
          id="main-content"
          class="container"
          [class.container_offline]="offline$ | async"
        >
          <ion-content
            #viewport="viewport"
            responsiveColViewport
            class="ion-padding with-widgets"
            style="pointer-events: none; opacity: 0"
          ></ion-content>
        </ion-router-outlet>
      </ion-split-pane>

      <section appPreloader></section>
    </ion-content>
    <ion-footer>
      <footer appFooter></footer>
    </ion-footer>
    <ion-footer
      *ngIf="(authService.isVerified$ | async) && !(sidebarOpen$ | async)"
    >
      <connection-bar></connection-bar>
    </ion-footer>
    <toast-container></toast-container>
  </ion-app>
</tui-root>
<ng-container
  *ngIf="authService.isVerified$ | async"
  [ngSwitch]="theme$ | async"
>
  <ng-container *ngSwitchCase="'Dark'">
    <tui-theme-night></tui-theme-night>
    <dark-theme></dark-theme>
  </ng-container>
  <light-theme *ngSwitchCase="'Light'"></light-theme>
</ng-container>
